<template>
  <div>
    <van-nav-bar title="新增拜访信息" left-arrow @click-left="goback">
      <template #right>
        <img src="../assets/个人中心/fanhuishouye.png" width="20" alt="" />
      </template>
    </van-nav-bar>
    <div class="text">
      <van-field
        v-model="text"
        label="客户名称"
        placeholder="下拉搜索"
        required
      />
    </div>
    <div class="text">
      <van-field v-model="text" label="拜访标题" placeholder="" required />
      <van-field v-model="text" label="拜访原因" placeholder="" required />
      <van-field
        v-model="visitTime"
        @click="showPopup"
        label="拜访时间"
        placeholder=""
        required
      />
      <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="confirm"
        />
      </van-popup>
    </div>
    <div class="text1">
      <van-field
        v-model="message"
        rows="2"
        autosize
        label="拜访地址"
        type="textarea"
        placeholder="请输入"
        show-word-limit
      />
    </div>
    <div class="text1">
      <van-field
        v-model="message"
        rows="2"
        autosize
        label="拜访情况"
        type="textarea"
        placeholder="请输入"
        show-word-limit
      />
    </div>
    <div class="text1">
      <van-field
        v-model="message"
        rows="2"
        autosize
        label="竞争信息收集情况"
        type="textarea"
        placeholder="请输入"
        show-word-limit
      />
    </div>
    <button>保存</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: '',
      //拜访时间
      visitTime:''
    };
  },
  methods: {
    goback() {
      this.$router.push("/vsitlist");
    },
    showPopup() {
      this.show = true;
    },
    confirm(type, val) {
      if (type === 'year') {
        return `${val}年`;
      } else if (type === 'month') {
        return `${val}月`;
      }
     this.visitTime= val;
    },
    // confirm(value) {
    //   this.show = false;
    //   this.visitTime=value
    // },
  },
};
</script>
 
<style lang = "less" scoped>
/deep/ .van-nav-bar__content {
  background: #003399;
  .van-nav-bar__title {
    color: #fff;
  }
  .van-icon {
    color: #fff;
  }
}
.text {
  margin-top: 10px;
}
.text1 {
  margin-top: 10px;
  /deep/ .van-cell {
    height: 100px;
  }
}
button {
  border: 0;
  width: 90%;
  height: 40px;
  background-color: rgb(180, 224, 241);
  margin: 30px 20px;
  border-radius: 40px;
  color: #fff;
}
</style>